<template>
  <div>
    <div class="badges">
      <el-badge :value="count.one" class="item">
        <el-button size="small">全部申请</el-button>
      </el-badge>
      <el-badge :value="count.two" class="item">
        <el-button size="small">待处理</el-button>
      </el-badge>
      <el-badge :value="count.three" class="item">
        <el-button size="small">已处理</el-button>
      </el-badge>
      <el-badge :value="count.four" class="item">
        <el-button size="small">已完成</el-button>
      </el-badge>
      <el-badge :value="count.five" class="item">
        <el-button size="small">已拒绝</el-button>
      </el-badge>
    </div>

    <el-container>
      <div>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-search"></i> 筛选查询
            </div>
            <div>
              <el-button @click="selectResults()">查询结果</el-button>
              <el-button @click="advancedSearch()">高级检索</el-button>
            </div>
          </el-header>
          <div class="info-main">
            <el-form ref="form" :model="formInline" label-width="100px">
              <el-form-item class="select-div" label="输入搜索：">
                <el-input placeholder="服务单号" class="input-width" v-model="formInline.id"></el-input>
              </el-form-item>
              <el-form-item class="select-div" label="申请时间：">
                <el-date-picker v-model="formInline.applyTime" type="date" placeholder="请选择时间"></el-date-picker>
              </el-form-item>
              <el-form-item class="select-div margin-left" label="处理状态：">
                <el-select class="input-width3" v-model="formInline.status" placeholder="全部">
                  <el-option label="待处理" value="0"></el-option>
                  <el-option label="退货中" value="1"></el-option>
                  <el-option label="已完成" value="2"></el-option>
                  <el-option label="已拒绝" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-container>
      </div>

      <el-footer>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-s-fold"></i> 数据列表
            </div>
            <div>
              <el-button @click="exportOrder">导出数据</el-button>
              <el-select
                v-model="accordingPageSize"
                class="margin-left input-width2"
                placeholder="显示条数"
              ></el-select>
              <el-select v-model="sort" class="input-width2" placeholder="排列方式">
                <el-option label="申请时间排序" value="0"></el-option>
                <el-option label="处理时间排序" value="1"></el-option>
                <el-option label="退款金额排序" value="2"></el-option>
              </el-select>
            </div>
          </el-header>
          <div class="info-main padding-style">
            <el-table
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="id" label="服务单号" width="150">
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column prop="applyTime" label="申请时间" width="160">
                <template slot-scope="scope">{{scope.row.applyTime}}</template>
              </el-table-column>
              <el-table-column prop="userAccount" label="用户账号">
                <template slot-scope="scope">{{scope.row.userAccount}}</template>
              </el-table-column>
              <el-table-column prop="returnMoney" label="退款金额">
                <template slot-scope="scope">{{scope.row.returnMoney}}</template>
              </el-table-column>
              <el-table-column prop="status" label="申请状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">待处理</span>
                  <span v-if="scope.row.status == 1">退货中</span>
                  <span v-if="scope.row.status == 2">已处理</span>
                  <span v-if="scope.row.status == 3">已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column prop="disposeTime" label="处理时间">
                <template slot-scope="scope">{{scope.row.disposeTime}}</template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleSelect(scope.$index, scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-footer class="info-foot">
            <el-checkbox @change="toggleSelectionCheckbox()" size="small">全选</el-checkbox>
            <el-select class="input-width2 margin-left" v-model="batchOperation" placeholder="批量操作">
              <el-option label="删除" value="删除"></el-option>
            </el-select>
            <el-button class="margin-left" @click="configButton()">确定</el-button>
            <div class="paging-style">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </el-footer>
        </el-container>
      </el-footer>
    </el-container>

    <el-dialog title="高级检索" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-form ref="search" :model="formInline" label-width="120px">
        <div class="search-style">
          <el-form-item label="输入搜索：">
            <el-input class="input-width3" placeholder="服务单号" v-model="formInline.id"></el-input>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker v-model="formInline.applyTime" type="date" placeholder="请选择时间"></el-date-picker>
          </el-form-item>
        </div>
        <div class="search-style">
          <el-form-item label="处理时间：">
            <el-date-picker v-model="formInline.disposeTime" type="date" placeholder="请选择时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="处理状态：">
            <el-select class="input-width3" v-model="formInline.status" placeholder="全部">
              <el-option label="待处理" value="0"></el-option>
              <el-option label="退货中" value="1"></el-option>
              <el-option label="已完成" value="2"></el-option>
              <el-option label="已拒绝" value="3"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="searchReset()">重 置</el-button>
          <el-button type="primary" @click="retrieve()">开始检索</el-button>
        </span>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import reorderApi from "@/api/order/reorderlist";
import request from "@/utils/request";
export default {
  data() {
    return {
      // 计数
      count: {
        one: "",
        two: "",
        three: "",
        four: "",
        five: "",
        six: ""
      },

      formInline: {
        id: null,
        applyTime: null,
        disposeTime: null,
        status: null
      },
      search: {
        num: "",
        datetime: "",
        dealtime: "",
        state: "",
        personnel: ""
      },
      batchOperation: "",
      accordingPageSize: "",
      multipleSelection: [],
      moreOperation: "",

      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage4: 1,
      sort: 0,

      dialogVisible: false,
      checkbox: false,
      //开起筛选
      selectrue: true,

      tableData: []
    };
  },
  watch: {
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      if (this.selectrue == true) {
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          val,
          this.formInline.id,
          this.formInline.linkman,
          this.formInline.linkmanMobile,
          this.formInline.applyTime,
          this.formInline.status,
          this.formInline.disposeTime,
          this.formInline.adminId
        );
      } else {
        this.inData(this.currentPage4, this.pageSize, val);
      }
    }
  },
  methods: {
    // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }
      let d = new Date(str);
      let newDateYear = d.getFullYear();
      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";
      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    },

    // 时间转化
    parseTime1(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }
      let d = new Date(str);
      let newDateYear = d.getFullYear();
      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";
      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    },

    selectResults() {
      this.currentPage4 = 1;
      this.pageSize = 2;
      console.log(this.formInline);
      this.inDataTwo(
        this.currentPage4,
        this.pageSize,
        this.sort,
        this.formInline.id,
        this.formInline.linkman,
        this.formInline.linkmanMobile,
        this.formInline.applyTime,
        this.formInline.status,
        this.formInline.disposeTime,
        this.formInline.adminId
      );
    },
    exportOrder() {
      alert("执行导出数据");
    },
    advancedSearch() {
      this.dialogVisible = true;
    },
    searchReset() {
      this.formInline.id = null;
      this.formInline.applyTime = null;
      this.formInline.disposeTime = null;
      this.formInline.status = null;
    },

    retrieve() {
      (this.currentPage4 = 1),
        (this.pageSize = 2),
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.id,
          this.formInline.linkman,
          this.formInline.linkmanMobile,
          this.formInline.applyTime,
          this.formInline.status,
          this.formInline.disposeTime,
          this.formInline.adminId
        );
      this.dialogVisible = false;
    },

    handleSelect(index, row) {
      this.$router.push({ path: "/order/drawBackForm", query: { id: row.id } });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${this.pageSize} 条`);
      if (this.selectrue == true) {
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.id,
          this.formInline.linkman,
          this.formInline.linkmanMobile,
          this.formInline.applyTime,
          this.formInline.status,
          this.formInline.disposeTime,
          this.formInline.adminId
        );
      } else {
        this.inData(this.currentPage4, this.pageSize, this.sort);
      }
    },

    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${this.currentPage4}`);
      if (this.selectrue == true) {
        this.inDataTwo(
          this.currentPage4,
          this.pageSize,
          this.sort,
          this.formInline.id,
          this.formInline.linkman,
          this.formInline.linkmanMobile,
          this.formInline.applyTime,
          this.formInline.status,
          this.formInline.disposeTime,
          this.formInline.adminId
        );
      } else {
        this.inData(this.currentPage4, this.pageSize, this.sort);
      }
    },

    inData(pageNum, pageSize, sort) {
      reorderApi.getFindAll(pageNum, pageSize, sort).then(Response => {
        console.log(Response);
        this.tableData = Response.data.data.list;
        this.total = Response.data.data.total;
      });
    },

    //筛选条件
    inDataTwo(
      pageNum,
      pageSize,
      sort,
      id,
      linkman,
      linkmanMobile,
      applyTime,
      status,
      disposeTime,
      adminId
    ) {
      if (
        id != null ||
        linkman != null ||
        linkmanMobile != null ||
        applyTime != null ||
        status != null ||
        disposeTime != null ||
        adminId != null
      ) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选" + this.selectrue);
      // 转化时间

      if (applyTime != null) {
        var time = this.parseTime(applyTime);
      } else {
        var time = applyTime;
      }

      if (disposeTime != null) {
        var time1 = this.parseTime1(disposeTime);
      } else {
        var time1 = disposeTime;
      }

      reorderApi
        .getListMs(
          pageNum,
          pageSize,
          sort,
          id,
          linkman,
          linkmanMobile,
          time,
          status,
          time1,
          adminId
        )
        .then(Response => {
          console.log(Response);
          // var data=JSON.parse(JSON.stringify( ))
          this.tableData = Response.data.data.list;
          this.total = Response.data.data.total;
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },
    toggleSelectionCheckbox() {
      if (this.tableData) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    configButton() {
      this.$confirm("是否删除" + "提示", {
        type: "warning"
      }).then(() => {
        console.log(this.multipleSelection);
        reorderApi.getAllDel(this.multipleSelection).then(Response => {
          const psa = Response.data;
          console.log(Response);
          if (psa.code == 200) {
            this.inData(this.currentPage4, this.pageSize, this.sort);
          } else {
            this.$message({
              message: psa.message,
              type: "warning"
            });
          }
        });
      });
    },
    handleClose(done) {
      done();
    },

    countData(status) {
      reorderApi.getAllObjTwo(status).then(Response => {
        console.log(Response);
        if (status == null) {
          this.count.one = Response.data.data;
        }
        if (status == 0) {
          this.count.two = Response.data.data;
        }
        if (status == 1) {
          this.count.three = Response.data.data;
        }
        if (status == 2) {
          this.count.four = Response.data.data;
        }
        if (status == 3) {
          this.count.five = Response.data.data;
        }
      });
    }
  },
  mounted() {
    this.inData(this.currentPage4, this.pageSize, this.sort);
    this.countData(null);
    this.countData(0);
    this.countData(1);
    this.countData(2);
    this.countData(3);
  }
};
</script>

<style scoped>
.badges {
  height: 60px;
  padding: 10px;
}
.common-home,
.content-header {
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}
.common-home > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  vertical-align: top;
  text-align: center;
  line-height: 50px;
  color: #666666;
}
.common-home > .refresh {
  position: absolute;
  right: 10px;
}
.common-home > div > span {
  border: 4px solid #0399fe;
  display: inline-block;
  width: 0px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
  background-color: #0399fe;
}
.parent-body {
  border: 1px solid #e4e4e4;
}
.content-header {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  color: #666666;
  position: relative;
  text-align: left;
}
.info-main {
  background-color: #fff;
}

.content-header > div {
  display: inline-block;
}
.content-header > div:last-of-type {
  position: absolute;
  right: 10px;
}
.input-width {
  width: 200px;
}
.select-div {
  display: inline-block;
  margin-top: 18px;
  width: 300px;
}
.input-width2 {
  width: 120px;
}
.input-width3 {
  width: 220px;
}
.padding-style {
  padding: 0 !important;
}

.info-foot {
  background-color: #fdfdfe;
  height: 60px;
  line-height: 60px;
  position: relative;
}
.paging-style {
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 15px;
}
.margin-left {
  margin-left: 10px;
}
.search-style {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
</style>

